<template>
  <a-modal
    title="发布帖子"
    v-model="visible"
    :width="1000"
    @ok="onSubmit"
    @cancel="onCancel"
  >
    <a-form-model
      ref="qForm"
      :rules="questionRules"
      :model="questionForm"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="帖子类型" prop="type">
        <a-select v-model="questionForm.type" placeholder="请选择发布帖子的类型">
          <a-select-option v-for="(item,index) in typeOpts" :key="index" :value="index">{{ item }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="帖子标题" prop="title">
        <a-input v-model="questionForm.title" placeholder="请输入帖子标题" />
      </a-form-model-item>
      <a-form-model-item label="帖子标题">
        <a-textarea v-model="questionForm.describe" :rows="10"></a-textarea>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
// import { quillEditor, Quill } from 'vue-quill-editor'
// import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
import { getAddQuestion, postAddQuestion } from '@/api/bbs'

// Quill.register('modules/ImageExtend', ImageExtend)

export default {
  name: 'Add',
  data () {
    return {
      visible: false,
      questionForm: {},
      questionRules: {
        type: [ { required: true, message: '请选择帖子类型', trigger: 'change' } ],
        title: [ { required: true, message: '请输入帖子标题', trigger: 'blur' } ],
        describe: [ { required: true, message: '帖子内容不能为空', trigger: 'blur' } ]
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      typeOpts: {}
      // editorOption: {
      //   modules: {},
      //   toolbar: {
      //     container: container,
      //     handlers: {
      //       'image': () => {
      //         QuillWatch.emit(this.quill.id)
      //       }
      //     }
      //   }
      // }
    }
  },
  created () {
    this.visible = true
    getAddQuestion().then(res => {
      this.typeOpts = res.result.type
    })
  },
  methods: {
    onSubmit () {
      const app = this
      app.$refs.qForm.validate(valid => {
        if (valid) {
          const data = {}
          for (const k in app.questionForm) {
            data['filter[' + k + ']'] = app.questionForm[k]
          }
          postAddQuestion(data).then(res => {
            if (res.status === 0) {
              app.visible = false
              this.$emit('submit')
            }
          })
        } else {
          return false
        }
      })
    },
    onCancel () {
      this.questionForm = {}
      this.visible = false
      this.$emit('cancel', this.visible)
    }
  }
}
</script>

<style scoped>

</style>
